<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tree</title>
    <link rel="stylesheet" type="text/css" href="ext-4.2.1.883/resources/css/ext-all.css">
    <script type="text/javascript" src="ext-4.2.1.883/ext-all.js"></script>
    <script type="text/javascript" src="ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
</head>
<body>

<script type="text/javascript">
    Ext.onReady(function () {
//        var myStore = Ext.create('Ext.data.TreeStore', {
//            fields: [
//                'folderName','pid','id'
//            ],
//            clearOnLoad:true,
//            proxy: {
//                type: 'ajax',
//                url: 'http://localhost:8080/folder/getList.do',
//                actionMethods: {create: "POST", read: "POST", update: "POST", destroy: "POST"},
//                reader: {
//                    type: 'json',
//                    root: 'data'
//                },
//                extraParams: {
//                    pid: '2'
//                }
//            },
//            nodeParam: 'pid',
//            root: {
//                id:'root',
//                expanded:true
//            },
//            autoLoad: true,
//
//        });
//
//        Ext.create('Ext.tree.Panel', {
//            title: 'Simple Tree',
//            width: 500,
//            height: 200,
//            store: myStore,
//            rootVisible: false,
//            displayField:'folderName',
//            renderTo: Ext.getBody(),
//            bbar: [
//                { xtype: 'button', text: 'Button 1' }
//            ]
//        });

        Ext.create('Ext.tree.Panel', {
            title: '目录管理',
            //rootVisible: false,
            viewConfig: {
                plugins: {
                    ptype: 'treeviewdragdrop'
                }
            },
            initComponent: function () {
                var me = this;
                me.displayField = 'folderName';
                me.store = Ext.create('Ext.data.TreeStore', {
                    fields: ['folderName', 'pid', 'id'],
                    clearOnLoad: true,
                    proxy: {
                        type: 'ajax',
                        url: 'http://localhost:8080/folder/getList.do',
                        reader: {
                            type: 'json',
                            rootProperty: 'data'
                        },
                        actionMethods:{read:"POST"},
                        extraParams: {
                            pid: '2',
                        },
                    },
                    nodeParam: 'pid',
                    root: {
                        id: null,
                        expanded: true
                    },
                    autoLoad: true
                });
                me.listeners = {
                    beforeitemexpand: function (node, optd) {
                        me.store.proxy.extraParams.pid = node.get('id');
                    },
                    drop: function (node, data, overModel, dropPosition, eOpts) {
                        var id = data.records[0].get('id');
                        var pid = overModel.data.pid;
                        var url = 'http://localhost:8080/folder/getList.do';
                        var params = {
                            pid: pid
                        };
                        me.setData(url, params);
                    },
                    afterrender: function () {
                        var record = me.getRootNode();
                        me.getSelectionModel().select(record);
                    }
                };
//                me.on({
//                    select: function (e, record, index, eOpts) {
//                        me.record = record;
//                    },
//                    itemcontextmenu: function (view, record, item, index, e, eOpts) {
//                        if (WF.global.folder.isShowMenu) {
//                            e.preventDefault();
//                            var refreshMenu = Ext.create('Ext.menu.Item', {
//                                text: '刷新',
//                                handler: function (btn, state) {
//                                    me.refreshFolder();
//                                }
//                            });
//                            var addMenu = Ext.create('Ext.menu.Item', {
//                                text: '新增',
//                                handler: function (btn, state) {
//                                    me.addFolder();
//                                }
//                            });
//                            var deleteMenu = Ext.create('Ext.menu.Item', {
//                                text: '删除',
//                                handler: function (btn, state) {
//                                    me.deleteFolder();
//                                }
//                            });
//                            var renameMenu = Ext.create('Ext.menu.Item', {
//                                text: '重命名',
//                                handler: function (btn, state) {
//                                    me.renameFolder();
//                                }
//                            });
//                            var menu = Ext.create('Ext.menu.Menu', {
//                                items: [refreshMenu, addMenu, deleteMenu, renameMenu]
//                            });
//                            menu.showAt(e.getXY());
//                        }
//                    }
//                });
                me.callParent(arguments);
            },
            afterFirstLayout: function () {
                var me = this;
                me.callParent(arguments);
            },
//            initToolbars: function () {
//                var me = this;
//                var refreshBtn = Ext.create('Ext.Button', {
//                    text: '刷新',
//                    handler: function (btn, state) {
//                        me.refreshFolder();
//                    }
//                });
//                var addBtn = Ext.create('Ext.Button', {
//                    text: '新增',
//                    handler: function (btn, state) {
//                        me.addFolder();
//                    }
//                });
//                var deleteBtn = Ext.create('Ext.Button', {
//                    text: '删除',
//                    handler: function (btn, state) {
//                        me.deleteFolder();
//                    }
//                });
//                var renameBtn = Ext.create('Ext.Button', {
//                    text: '重命名',
//                    handler: function (btn, state) {
//                        me.renameFolder();
//                    }
//                });
//                me.tbar = me.toolbar = Ext.create('Ext.toolbar.Toolbar', {
//                    items: [refreshBtn, addBtn, deleteBtn, renameBtn]
//                });
//            },
            setData: function (url, params) {
                var obj;
                Ext.Ajax.request({
                    async: false,
                    method: 'POST',
                    url: url,
                    jsonData: params,
                    callback: function (request, success, response) {
                        if (success) {
                            var text = response.responseText;
                            obj = Ext.decode(text);
                        }
                    }
                });
                return obj;
            },
            refreshFolder: function () {
                var me = this;
                me.store.proxy.extraParams.pid = WF.global.folder.folderId;
                me.store.load();
            },
            addFolder: function () {
                var me = this;
                Ext.MessageBox.prompt("新增", "请输入目录名：", function (bu, txt) {
                    if (bu == 'ok') {
                        var name = txt;
                        var url = WF.global.folder.create_url + '?token=' + me.token;
                        var params;
                        if (me.record.get('pid')) {
                            params = {
                                pid: me.record.get('id'),
                                folder_name: name
                            };
                            me.setData(url, params);
                            me.store.load({node: me.record});
                            me.record.expand();
                        } else {
                            params = {
                                pid: WF.global.folder.folderId,
                                folder_name: name
                            };
                            me.setData(url, params);
                            me.store.proxy.extraParams.pid = WF.global.folder.folderId;
                            me.store.load();
                        }
                    }
                });
            },
            deleteFolder: function () {
                var me = this;
                if (me.record.get('pid')) {
                    var id = me.record.get('id');
                    var url = WF.global.folder.destroy_url + '?token=' + me.token + '&id=' + id;
                    me.setData(url, {});
                    me.record.remove();
                    me.record = null;
                    Ext.Msg.alert('提示', '删除成功');
                } else {
                    Ext.Msg.alert('提示', '不允许删除根目录');
                }
            },
            renameFolder: function () {
                var me = this;
                if (me.record.get('pid')) {
                    Ext.MessageBox.prompt("重命名", "请输入新目录名：", function (bu, txt) {
                        if (bu == 'ok') {
                            var name = txt;
                            var id = me.record.get('id');
                            var url = WF.global.folder.update_url + '?token=' + me.token + '&id=' + id;
                            var params = {
                                folder_name: name
                            };
                            me.setData(url, params);
                            me.record.set('folder_name', txt);
                        }
                    });
                } else {
                    Ext.Msg.alert('提示', '请选择要修改的目录');
                }
            }
        });


    })

</script>

</body>
</html>